import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.StyleProp);

# Style prop

All Mantine components that have root element support `style` prop.
It works similar to React `style` prop, but with some additional features.

## Style object

You can pass a style object to the `style` prop – in this case it works the same way
as React `style` prop. You can use Mantine [CSS variables](/styles/css-variables) in style object
the same way as in [.css files](/styles/css-modules).

```tsx
import { Box, rem } from '@mantine/core';

function Demo() {
  return (
    <Box
      style={{
        color: 'var(--mantine-color-red-5)',
        fontSize: rem(12),
      }}
    />
  );
}
```

## Define CSS variables in style prop

You can define CSS variables in the style prop. Note that it only works with Mantine components:

```tsx
import { Box } from '@mantine/core';

function Demo() {
  return (
    <Box
      style={{ '--radius': '0.5rem', borderRadius: 'var(--radius)' }}
    />
  );
}
```

## Style function

You can pass a style function to the `style` prop – in this case it will be called with [theme](/theming/theme-object/).
It is useful when you need to access [theme](/theming/theme-object/) properties that are not exposed as [CSS variables](/styles/css-variables),
for example, properties from `theme.other`.

```tsx
import { Box } from '@mantine/core';

function Demo() {
  return (
    <Box
      style={(theme) => ({
        color: theme.colors.red[5],
        fontSize: theme.fontSizes.xs,
      })}
    />
  );
}
```

## Styles array

You can pass an array of style objects and/or functions to `style` prop – in this case, all styles will be merged into one object.
It is useful when you want to create a wrapper around Mantine component, add inline styles and keep the option to pass
`style` prop to it.

```tsx
import { Box, MantineStyleProp } from '@mantine/core';

interface DemoProps {
  style?: MantineStyleProp;
}

function Demo({ style }: DemoProps) {
  return <Box style={[{ color: 'red' }, style]} />;
}
```
